<!--
 * @Descripttion: 大二一名学习前端开发的计科学生，缓慢成长中！
 * @emial: 2392862431@qq.com
 * @Author: SummerSofts
 * @Date: 2023-09-06 20:59:08
 * @LastEditors: SummerSofts
 * @LastEditTime: 2023-09-12 10:40:03
-->
<template>
    <div class="code">
        <pre v-highlight>
            <img id="copy_text" :data-clipboard-text="sourceCode" @click="handleCopy" src="../../../assets/icon/copy.png" alt="">.
        <code class="codeBox">
          {{ sourceCode }}
        </code>
        </pre>
    </div>
</template>

<script setup>
import Clipboard from "clipboard";
import { ref, reactive, onMounted } from "vue"
import { wmIcon } from "warmheart-design"
let sourceCode = ref(`import wmIconStyle from "../node_modules/warmheart-design/dist/icon/iconfont.css"
         app.use(wmIconStyle)  `)
const handleCopy = () => {
    let clipboard = new Clipboard("#copy_text");
    clipboard.on("success", (e) => {
        alert("复制成功！")
        clipboard.destroy(); // 释放内存
    });
    clipboard.on("error", (e) => {
        // 不支持复制
        alert("复制失败，不支持！")
        clipboard.destroy(); // 释放内存
    });

}
</script>
    
    
<style lang="less" scoped>
#copy_text{
    position: absolute;
    width:30px;
    height: 30px;
    right:5px;
    top:38px;
    cursor: pointer;
    z-index: 999;
}
.code {
    width: 50vw;
    position: relative;
}

.codeBox {
    position: relative;
    width: 50vw;
}
</style>
    